{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 操作记录{% endblock %}
{% block content %}
        <!-- 内容标题栏 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h1 class="m-0 text-dark">系统日志</h1>
          </div><!-- /.col -->
          <div class="col-sm-12">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">系统管理</li>
                <li class="breadcrumb-item active"><a href="">操作日志</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /内容标题栏 -->
<section class="content">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card card-gray">
                <div class="card-body table-responsive p-1">
                    <table id="loglist" class="table table-striped table-bordered text-nowrap">
                        <thead>
                        <tr style="vertical-align: middle;text-align: center;" class="bg-gray">
                            <th style="border: none;">序号</th>
                            <th style="border: none;">用户</th>
                            <th style="border: none;">日志内容</th>
                            <th style="border: none;">记录时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for info in logs %}
                            <tr style="vertical-align: middle;text-align: center">
                                <td>{{ forloop.counter }}</td>
                                <td>{{ info.username }}</td>
                                <td>{{ info.content }}</td>
                                <td>{{ info.modify_time }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</section>
{% block custom_js %}
    <!--dataTables-->
   <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script>
  $(function () {
    $("#loglist").DataTable({
      "responsive": false,   //适配手机端表格滚动，需设置为false
      "autoWidth": false,    //固定宽度
      "paging": true,        //允许分页
      "searching": true,     //允许内容搜索
      "lengthChange": true,  //允许改变每页显示的行数
      "ordering": true,      //允许排序
      "info": true,          //显示信息
        "oLanguage":{        //语言转换
            "sProcessing": "处理中...",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sZeroRecords": "没有找到匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共_TOTAL_ 项",
            "sLengthMenu": "每页显示: _MENU_ 行",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "后一页",
                "sLast": "尾页",
                },
            "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
      }
    });
  });
</script>
{% endblock %}
{% endblock %}